<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-container>
          <el-header id="homeMenuHead" class="goCenter">
            <span style="font-size:25px">新职通后台管理</span>
          </el-header>
          <el-main id="homeMenuAside">
            <el-menu
              :default-active="$route.path"
              router
              id="homeMenu"
              class="el-menu-vertical-demo"
            >
              <el-menu-item index="/home/firstPage">
                <i class="el-icon-s-home" style="font-size:25px"></i>
                <span slot="title" style="font-size:20px">首页</span>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-order" style="font-size:25px"></i>
                  <span style="font-size:20px">管理</span>
                </template>
                <el-menu-item-group>
                  <!-- <el-submenu index="1-4">
                                            <span slot="title">培训管理</span>
                                            <el-menu-item index="1-4-1">培训管理</el-menu-item>
                                            <el-menu-item index="1-4-2">审核培训</el-menu-item>
                                             <el-menu-item index="1-4-3">查看培训</el-menu-item>
                  </el-submenu>-->
                  <el-menu-item index="/home/train">培训管理</el-menu-item>
                  <el-menu-item index="/home/recruit">招聘管理</el-menu-item>
                  <el-menu-item index="/home/consign">委培管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-check" style="font-size:25px"></i>
                  <span style="font-size:20px">定价</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">会员定价</el-menu-item>
                  <el-menu-item index="3-2">业务定价</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-s-data" style="font-size:25px"></i>
                  <span style="font-size:20px">统计</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">用户统计</el-menu-item>
                  <el-menu-item index="4-2">企业统计</el-menu-item>
                  <el-menu-item index="4-3">业务统计</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-main>
        </el-container>
      </el-aside>
      <el-main style="background-color: #F1F1F1;hight:100%">
        <el-container>
          <el-header id="homeHead">
            <div class="goEnd" style="margin-right:20px;height:100%">
              <el-avatar
                size="medium"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                style="margin-right:10px"
              ></el-avatar>
              <el-dropdown @command="handleCommand">
                <span style="color:#fff">
                  管理员
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item command="edit">修改密码</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-header>
          <el-main id="mainContentBox">
            <!-- <el-breadcrumb separator=">">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>-->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    mounted(){
        var body=document.getElementById('homeMenu');
        var height=document.documentElement.clientHeight-120;
        body.style.height=height+'px';
        console.log(height);

        var mainBody=document.getElementById('mainContentBox');
        var mainBodyHeight=document.documentElement.clientHeight-120;
        mainBody.style.height=height+'px';
        console.log(height);
    },
    methods:{
        handleCommand(command){
            console.log('指令',command);
            if(command==='edit'){
                this.editPassword();
            }else if(command==='logout'){
                this.logout();
            }
        },
        //修改密码
        editPassword(){
            this.$message({
                message: '暂不支持修改密码',
                type: 'warning'
            });
        },
        //登出
        logout(){
            var URL=this.IP+'/user/logout';
            console.log(URL);
            this.$ajax({
                method:'post',
                url:URL,
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                        this.$message({
                            message: response.data.data,
                            type: 'success'
                        });
                        setTimeout(()=>{
                            this.$router.push({
                                path:'/'
                            });
                        },2000)
                }else{
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
    }
            
        
}
</script>
<style>
.el-container,
.el-header,
.el-main,
.el-footer,
.el-aside {
  padding: 0px;
}
#homeMenuHead {
  background-color: #3091f2;
  color: #fff;
}
#homeHead {
  background-color: #409eff;
}
.goCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.goEnd {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#mainContentBox {
  margin: 15px;
  background-color: #fff;
}

.pointer {
  cursor: pointer;
}
</style>